<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <div></div>
</template>

<script setup>
// cSpell:ignore pixi
import { 
  Application, 
  Container,
  Assets, 
  Spritesheet, 
  Sprite,
  TilingSprite,
  AnimatedSprite,
  Text
} from 'pixi.js';

(async () =>
{
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#ffffff', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Create and add a container to the stage
    const container = new Container();

    app.stage.addChild(container);

    // 1. 加载雪碧图
    const baseTexture = await Assets.load('/download.png');

    // 2. 创建图集定义（假设你知道子图位置）
    const sheetData = {
        frames: {
            'dinoTexture': { frame: { x: 40, y: 0, w: 44, h: 52 } },
            'dinoRunTexture1': { frame: { x: 936, y: 0, w: 46, h: 52 } },
            'dinoRunTexture2': { frame: { x: 980, y: 0, w: 46, h: 52 } },
            'dinoJumpTexture': { frame: { x: 846, y: 0, w: 46, h: 52 } },
            'groundTexture': { frame: { x: 100, y: 52, w: 1100, h: 15 } },
            'cactusTexture': { frame: { x: 330, y: 0, w: 28, h: 52 } },
        },
        meta: {
            image: 'download.png',
            scale: '1'
        }
    };

    // 3. 创建并解析精灵图集
    const sheet = new Spritesheet(baseTexture, sheetData);
    await sheet.parse();

    // 4. 提取特定子图

    // 创建恐龙精灵
    const dino = new Sprite(sheet.textures.dinoJumpTexture);
    dino.visible = false
    container.addChild(dino);     
    
    // 恐龙跑步动画
    const runAnimation = new AnimatedSprite([sheet.textures.dinoRunTexture1,sheet.textures.dinoRunTexture2])
    runAnimation.animationSpeed = 0.1;
    runAnimation.play();
    runAnimation.visible = false
    container.addChild(runAnimation); 

    // 跳跃恐龙精灵
    const jumpSprite = new Sprite(sheet.textures.dinoJumpTexture);
    jumpSprite.visible = false
    jumpSprite.x = 60;
    jumpSprite.y = window.innerHeight - 50 -52;
    container.addChild(jumpSprite);

    // 创建地面精灵
    const groundSprite = new TilingSprite(sheet.textures.groundTexture);
    groundSprite.width = window.innerWidth;
    groundSprite.height = 15
    groundSprite.position.set(0, window.innerHeight-50)
    // jumpSprite.visible = false
    container.addChild(groundSprite);

    // 创建仙人掌精灵
    const cactusSprite = new Sprite(sheet.textures.cactusTexture);
    // cactusSprite.visible = false
    cactusSprite.x = window.innerWidth / 2;
    cactusSprite.y = window.innerHeight - 50 - 52;
    container.addChild(cactusSprite);

    // 创建文字
    // let startText = new Text("开始游戏",{
    //   fontFamily:'Arial',
    //   fontSize: 26,
    //   fill:'#333333',
    //   align:'center'
    // })
    let startText = new Text({
      text: "开始游戏",
      style:{
        fontFamily:'Arial',
        fontSize: 26,
        fill:'#333333',
        align:'center'
      }
    })
    startText.x = window.innerWidth / 2;
    startText.y = window.innerHeight / 2;
    startText.anchor.set(0.5);
    container.addChild(startText);

    startText.interactive = true;
    startText.on('click',()=>{
      playGame();
    })

    // eslint-disable-next-line no-unused-vars
    let isGameing = false;
    // eslint-disable-next-line no-unused-vars
    let isGameover = false;

    // 开始游戏
    function playGame() {
      isGameing = true;
      console.log('开始游戏')
      // 显示恐龙跑步动画
      runAnimation.visible = true;
      runAnimation.x = 60;
      runAnimation.y = window.innerHeight - 50 - 52;
    }

    // 游戏得分
    // eslint-disable-next-line no-unused-vars
    let score = 0;
    // 初始化跳跃的速度
    // eslint-disable-next-line no-unused-vars
    let jumpVelocity = 0;
    // 初始化重力
    // eslint-disable-next-line no-unused-vars
    let gravity = 1;

    app.ticker.add((delta)=>{
      console.log(delta)
      if(isGameover) return ;
      if(isGameing){
        // 地板移动
        groundSprite.tilePosition.x -= 10;
        // 仙人掌移动
        cactusSprite.x -= 10;
        if(cactusSprite.x<-30){
          cactusSprite.x = window.innerWidth
          score ++;
        }
      }
      if(jumpSprite.visible){
        jumpVelocity -= gravity;
        jumpSprite.y -= jumpVelocity;
        if(jumpSprite.y > window.innerHeight-50-52){
          jumpSprite.y = window.innerHeight-50-52;
          jumpVelocity = 20;
          jumpSprite.visible = false;
          runAnimation.visible = true;
        }
      }
      if(
        jumpSprite.y > cactusSprite.y - 40 && 
        cactusSprite.x< jumpSprite.x + 40 && 
        cactusSprite.x>jumpSprite.x-40 
      ){
        gameOver();
        startText.text = "游戏结束，最后得分："+ score;
        startText.on('click',()=>{
          location.reload();
        })
      }
    })

    function gameOver(){
      isGameover = true;
      console.log('游戏结束');
    }

    window.addEventListener('keydown',(e)=>{
      if(e.code==='Space'){
        console.log("跳跃")
        // 跑步动画隐藏
        runAnimation.visible = false;
        // 跳跃动画显示
        jumpSprite.visible = true;
        jumpVelocity = 20;
      }
    })
})();

</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
